var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);


canvas = document.getElementById("canvas2");
ctx = canvas.getContext("2d");
ctx.lineWidth = 1.0;
ctx.strokeStyle = "#cc0000";

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(20,0);
ctx.lineTo(20,200);
ctx.lineTo(0,200);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(40,0);
ctx.lineTo(60,0);
ctx.lineTo(60,100);
ctx.lineTo(40,100);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.arc(200,150,30,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle='rgb(200,200,200)';
ctx.fill();

canvas = document.getElementById("canvas3");
ctx = canvas.getContext("2d");
ctx.fillRect(20,0,20,200);
ctx.strokeRect(60,0,20,200);

ctx.font="Bold 20px Arial";
ctx.textAlign="left";
ctx.fillStyle="#008600";
ctx.fillText("Hello!",100,50);
ctx.strokeText("Hello!",100,100);

var myGradient = ctx.createLinearGradient(0,0,0,160);
myGradient.addColorStop(0,"#BABABA");
myGradient.addColorStop(1,"#636363");
ctx.fillStyle=myGradient;
ctx.fillRect(10,10,200,100);

canvas = document.getElementById("canvas4");
ctx = canvas.getContext("2d");
var img = document.getElementById("img");
img.src = "./img/image.png";
img.width="200px";
ctx.drawImage(img,0,0);

